<script setup lang="ts">
import { ETable, ETableColumn } from 'exploria-ui';
import DemoBox from '@/components/DemoBox/DemoBox.vue';

defineProps<{
    data: {
        name: string;
        description: string;
        type: string;
        default: string;
        required: boolean;
    }[];
    subTitle: string;
}>();
</script>

<template>
    <DemoBox title="API">
        <div class="box">
            <h3>{{ subTitle }}</h3>
            <ETable :data="data">
                <ETableColumn label="名称" prop="name" />
                <ETableColumn label="描述" prop="description" />
                <ETableColumn label="类型" prop="type" />
                <ETableColumn label="默认值" prop="default" />
                <ETableColumn label="是否必填" prop="required" />
            </ETable>
        </div>
    </DemoBox>
</template>

<style scoped lang="scss">
@use '@/style/global' as global;

.box {
    padding: 15px;
    @include global.useTheme(
        plain,
        (
            padding: 0,
        )
    );
}
</style>
